<template>
	<view class="main-contanier" v-if="listData.length>0">
		<view class="head-box">
			<!-- <sg-uni-section title="特色业务" type="" class="sg-uni-section"> -->
			<!-- <text class="box-header-title" @click="goMore">更多</text>
				<uni-icons :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright" /> -->
			</sg-uni-section>
		</view>
		<view class="main-contanier2">
			<block v-for="(item, index) in listData" :key="index">
				<view class="main-box-item" @click="clickItem(item)">
					<view class="box-item-info">
						<image class="img" :src="item.icon" />
						<text class="txt">{{item.text}}</text>
					</view>
				</view>
			</block>
		</view>
		<ShowActionSheet :tips="showActionSheet.tips" :itemList="showActionSheet.itemList" :show="showActionSheet.show"
			:maskClosable="showActionSheet.maskClosable" :isCancel="showActionSheet.isCancel"
			@chooseCancel="showActionSheet.show = false;" @clickActionSheetItem="clickActionSheetItem">
		</ShowActionSheet>
	</view>
</template>

<script>
	import {
		UserJobsType,
		UserJobMenuAuth,
		Storage_Key,
		Platform
	} from '@/static/config.js'
	import ShowActionSheet from '@/components/show-action-sheet/show-action-sheet.vue'
	import {
		GetAuthModule,
		NavTo
	} from '@/common/util.js'
	import request from '@/common/request.js';
	export default {
		components: {
			ShowActionSheet
		},
		data() {
			return {
				listData: [],
				showActionSheet: {
					show: false,
					maskClosable: true,
					tips: "在岗人员",
					itemList: [],
					color: "#9a9a9a",
					size: 26,
					isCancel: true
				}
			}
		},

		computed: {},
		mounted() {
			let _self = this;
			uni.$on('RefreshIndexTabs', function(data) {
				_self.getListData();
			})
			_self.getListData();
		},
		onShow() {
			let _self = this;
			uni.$on('RefreshIndexTabs', function(data) {
				_self.getListData();
			})
			_self.getListData();
		},
		methods: {
			clickItem(item) {
				// this.$emit('clickItem', item)
				//如果是打卡,那么执行方法
				if (item.text === '打卡') {
					return this.clock()
				}
				if (item.text === '联系岗亭') {
					return this.phone()
				}
				uni.navigateTo({
					url: item.path
				})
			},
			getListData() {
				this.listData = GetAuthModule('index-2');
			},
			//点击'打卡'时调用的方法
			async clock() {
				try {
					const {
						data: clockHistory
					} = await this.getTodayClock() //.catch(e=>uni.showToast({title: `打卡失败!`,icon: 'error'}))
					if (clockHistory.length % 2 === 0) {
						const [err, succ] = await uni.showModal({
							title: '',
							content: '上班打卡'
						})
						if (succ && succ.confirm) this.doClock('1')
					} else if (clockHistory.length % 2 === 1) {
						const [err, succ] = await uni.showModal({
							title: '',
							content: '下班打卡'
						})
						if (succ && succ.confirm) this.doClock('0')
					}
				} catch (e) {
					return uni.showToast({
						title: `打卡失败!`,
						icon: 'error'
					})
				}
			},
			//点击'电话通知'时调用的方法
			async phone() {
				try {
					const {
						data: workingPersonList
					} = await this.getWorkingPersonList()
					this.showActionSheet.itemList = workingPersonList.map(item => {
						if (item.phone === null || item.phone === undefined || item.phone === '') item.phone =
							"无"
						return {
							name: item.name,
							color: "#333",
							phone: item.phone
						}
					})
					let bgs = {
						name: "办公室",
						color: "#333",
						phone: "0530-7332266"
					}
					this.showActionSheet.itemList.unshift(bgs);
					this.showActionSheet.show = true
				} catch (e) {
					//TODO handle the exception
					return uni.showToast({
						title: `操作失败,请稍后重试!`,
						icon: 'error'
					})
				}

			},
			clickActionSheetItem(item) {
				let number = this.showActionSheet.itemList[item.index].phone
				if (number === undefined || number === '无') return
				uni.makePhoneCall({
					phoneNumber: number
				});
			},
			//获取人员的今天打卡情况
			getTodayClock() {
				let webUserInfo = this.$storage.get(Storage_Key.web_user_info, true);
				return new Promise((resolve, reject) => {
					request({
						url: Platform.api_requestUrl + '/stp-clock/GetTodayClockList',
						data: webUserInfo.user.userId,
						method: 'POST',
					}).then(res => {
						if (res.code == 200 && !!res.data) {
							resolve(res);
						} else {
							reject(res)
						}
					}).catch(error => {
						reject(error)
					});
				})
			},
			//打卡
			doClock(state) {
				let webUserInfo = this.$storage.get(Storage_Key.web_user_info, true);
				//组装数据
				let stpclock = {
					userid: webUserInfo.user.userId,
					name: webUserInfo.user.userName,
					phone: webUserInfo.user.phone,
					clocktime: new Date().getTime(),
					state: state //上班1,下班0
				}
				return new Promise((resolve, reject) => {
					request({
						url: Platform.api_requestUrl + '/stp-clock/SaveOrUpdateClock',
						data: stpclock,
						method: 'POST',
					}).then(res => {
						if (res.code == 200 && !!res.data) {
							//resolve(res.data);
							uni.showToast({
								title: `打卡成功!`,
								icon: 'right'
							})
						} else {
							reject(res)
						}
					}).catch(error => {
						reject(error)
					});
				})
			},
			//获取当前正在上班的人
			getWorkingPersonList() {
				return new Promise((resolve, reject) => {
					request({
						url: Platform.api_requestUrl + '/stp-clock/getWorkingPersonList',
						method: 'POST',
					}).then(res => {
						if (res.code == 200 && !!res.data) {
							resolve(res);
						} else {
							reject(res)
						}
					}).catch(error => {
						reject(error)
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main-contanier2 {
		display: flex;
		padding: 0 15px;
		background-color: #FFFFFF;
		width: 100%;

		flex-wrap: wrap;
		align-content: center;

		.main-box-item {
			// flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 85px;
			height: 77px;
			margin: 8px;

			.box-item-info {
				display: flex;
				flex-direction: column;
				align-items: center;

				.img {
					width: 52px;
					height: 52px;
				}

				.txt {
					color: #606060;
				}
			}
		}
	}
</style>